<template>
	<div class="game-container report-container">
		<div v-if="!foundIn" class="view-container dealer-container">
			<div class="params">
				<el-form
					ref="form"
					:inline="true"
					:model="queryData"
					class="flex-warp-container"
				>
					<el-form-item
						:label="$t('common.belong_merchant') + ':'"
						class="flex-row-container"
						label-width="77px"
					>
						<merchant-select
							v-model="queryData.merchantId"
							:placeholder="$t('common.select_all')"
						></merchant-select>
					</el-form-item>
					<el-form-item
						:label="$t('operation.feedBack.feedback_time') + ':'"
						class="flex-row-container"
						label-width="77px"
					>
						<el-date-picker
							v-model="searchTime"
							size="medium"
							:picker-options="pickerShortcut2"
							format="yyyy-MM-dd HH:mm:ss"
							type="datetimerange"
							range-separator="-"
							:start-placeholder="$t('common.start_date')"
							:end-placeholder="$t('common.end_date')"
							align="right"
							:clearable="false"
							:default-time="defaultTime"
						></el-date-picker>
					</el-form-item>
					<el-form-item
						:label="$t('common.member_number') + ':'"
						class="flex-row-container"
						label-width="77px"
					>
						<el-input
							v-model="queryData.userName"
							clearable
							:maxlength="20"
							size="medium"
							v-input="{ name: 'num_alp' }"
							:placeholder="$t('common.please_enter')"
							:disabled="loading"
							@keyup.enter.native="enterSearch"
						></el-input>
					</el-form-item>
					<!-- <el-form-item label="账号类型:" class="tagheight" prop="operateType">
						<el-select
							v-model="queryData.accountType"
							style="width: 300px"
							clearable
							:placeholder="$t('common.all')"
							:popper-append-to-body="false"
						>
							<el-option
								v-for="item in accountTypeArr"
								:key="item.code"
								:label="item.description"
								:value="item.code"
							></el-option>
						</el-select>
					</el-form-item> -->
					<el-form-item
						:label="$t('operation.feedBack.feedback_type') + ':'"
						class="tagheight flex-row-container"
						label-width="77px"
					>
						<el-select
							v-model="queryData.problemType"
							clearable
							:placeholder="$t('common.all')"
							:popper-append-to-body="false"
						>
							<el-option
								v-for="item in problemType"
								:key="item.code"
								:label="item.description"
								:value="item.code"
							></el-option>
						</el-select>
					</el-form-item>

					<el-form-item>
						<el-button
							type="primary"
							icon="el-icon-search"
							:disabled="loading"
							size="medium"
							@click="search"
						>
							{{ $t('common.search') }}
						</el-button>
						<el-button
							icon="el-icon-refresh-left"
							:disabled="loading"
							size="medium"
							@click="reset"
						>
							{{ $t('common.reset') }}
						</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div class="content">
				<el-table
					v-loading="loading"
					element-loading-spinner="el-icon-loading"
					border
					size="mini"
					class="small-size-table"
					:data="tableData"
					style="width: 100%"
					:header-cell-style="getRowClass"
					@sort-change="_changeTableSort"
				>
					<!-- 操作时间 -->
					<el-table-column
						prop="createDt"
						align="center"
						:label="$t('operation.feedBack.feedback_time')"
					>
						<template slot-scope="scope">
							<span>{{ scope.row.createDt || '-' }}</span>
						</template>
					</el-table-column>

					<el-table-column
						prop="userName"
						align="center"
						:label="$t('common.member_number')"
					>
						<template slot-scope="scope">
							<span
								v-if="!!scope.row.userName"
								:title="scope.row.userName"
								:copy="copy"
							>
								{{ scope.row.userName }}
							</span>
							<span v-else>-</span>
						</template>
					</el-table-column>
					<el-table-column
						align="center"
						:label="$t('common.belong_merchant')"
					>
						<template slot-scope="scope">
							<span>
								{{ getMerchantName(scope.row.merchantId) }}
							</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="accountType "
						align="center"
						:label="$t('common.number_type')"
					>
						<template slot-scope="scope">
							<span v-if="!!scope.row.accountType">
								{{
									typeFilter(
										scope.row.accountType,
										'accountType'
									)
								}}
							</span>
							<span v-else>-</span>
						</template>
					</el-table-column>

					<el-table-column
						prop="labelName"
						align="center"
						:label="$t('operation.feedBack.member_tag')"
					>
						<template slot-scope="scope">
							<span>{{ scope.row.labelName || '-' }}</span>
						</template>
					</el-table-column>
					<!-- <el-table-column
						prop="levelId"
						align="center"
						:label="$t('common.vip_level')"
					>
						<template slot-scope="scope">
							<span
								v-if="
									!!scope.row.levelId ||
										scope.row.levelId === 0
								"
							>
								VIP{{ scope.row.levelId }}
							</span>
							<span v-else>-</span>
						</template>
					</el-table-column> -->
					<el-table-column
						align="center"
						:label="$t('operation.feedBack.feedback_type')"
					>
						<template slot-scope="scope">
							<span>
								{{ filterProblemType(scope.row.problemType) }}
							</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="problemDescribe"
						:show-overflow-tooltip="true"
						align="center"
						:label="$t('operation.feedBack.feedback_content')"
					>
						<template slot-scope="scope">
							<span>{{ scope.row.problemDescribe || '-' }}</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="operation"
						align="center"
						:label="$t('common.actions')"
					>
						<template slot-scope="scope">
							<el-button
								v-if="hasPermission('502041')"
								type="primary"
								icon="el-icon-view"
								size="medium"
								@click="lookMsg(scope.row)"
							>
								{{ $t('common.check_detail') }}
							</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!-- 分页 -->
				<el-pagination
					:current-page.sync="pageNum"
					class="pageValue"
					background
					layout="total, sizes,prev, pager, next, jumper"
					:page-size="pageSize"
					:page-sizes="pageSizes"
					:total="total"
					@current-change="handleCurrentChange"
					@size-change="handleSizeChange"
				></el-pagination>
			</div>
		</div>
		<foundIn
			v-else
			:rowData="rowData"
			:problemType="problemTypeDetail"
			@back="back"
		></foundIn>
	</div>
</template>

<script>
import { routerNames } from '@/utils/consts'
import list from '@/mixins/list'
import dayjs from 'dayjs'
import { mapGetters } from 'vuex'

const startTime = dayjs()
	.subtract(3, 'months')
	.valueOf()
const endTime = dayjs()
	.endOf('day')
	.valueOf()

export default {
	name: routerNames.feedBack,
	components: {
		foundIn: () => import('./components/foundIn')
	},
	mixins: [list],
	data() {
		this.loadData = this.throttle(this.loadData, 1000)
		return {
			accountType: '',
			foundIn: false,
			problemTypeDetail: undefined,
			rowData: {},
			queryData: {},
			searchTime: [startTime, endTime],
			now: dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'),
			summary: {
				count: 0,
				failCount: 0,
				successCount: 0
			},
			tableData: []
		}
	},
	computed: {
		accountTypeArr() {
			return [
				{
					code: '1',
					description: '试玩'
				},
				{
					code: '2',
					description: '商务'
				},
				{
					code: '3',
					description: '正式'
				},
				{
					code: '4',
					description: '测试'
				},
				{
					code: '5',
					description: '置换'
				}
			]
		},
		memberVipOperateFieldType() {
			return this.globalDics.memberVipOperateFieldType || []
		},
		problemType() {
			return this.globalDics.memberFeedBackType
		},
		...mapGetters(['merchantList'])
	},
	created() {},
	mounted() {},
	methods: {
		loadData() {
			this.loading = true
			const create = this.searchTime || []
			const [startTime, endTime] = create
			let params = {
				...this.queryData,
				startTime: startTime
					? dayjs(startTime).format('YYYY-MM-DD HH:mm:ss')
					: undefined,
				endTime: endTime
					? dayjs(endTime).format('YYYY-MM-DD HH:mm:ss')
					: undefined
			}
			params = {
				...this.getParams(params)
			}
			this.$api
				.getFeedBackPageFeedBack(params)
				.then((res) => {
					if (res?.code === 200) {
						const { record, totalRecord } = res.data || {}
						this.tableData = Array.isArray(record)
							? Object.freeze(record)
							: []
						this.total = totalRecord || 0
					}
					this.loading = false
				})
				.catch(() => {
					this.loading = false
				})
		},
		reset() {
			this.pageNum = 1
			this.queryData = {}
			this.searchTime = [startTime, endTime]
			this.loadData()
		},
		// 获取所属商户name
		getMerchantName(id) {
			return (
				this.merchantList.find((i) => i.id === id)?.merchantName || ''
			)
		},
		// getBackEnums() {
		// 	this.$api
		// 		.OperateObConfigAnnouncementRecordQueryFeedBackEnums()
		// 		.then((res) => {
		// 			if (res?.code === 200) {
		// 				this.backEnumsList = res.data?.problemType || []
		// 			}
		// 		})
		// },
		_changeTableSort({ column, prop, order }) {
			if (prop === 'createDt') {
				prop = 1
			}
			this.queryData.orderKey = prop
			if (order === 'ascending') {
				// 升序
				this.queryData.orderType = 'asc'
			} else if (column.order === 'descending') {
				// 降序
				this.queryData.orderType = 'desc'
			} else {
				delete this.queryData.orderKey
				delete this.queryData.orderType
			}
			this.loadData()
		},
		enterSubmit() {
			this.loadData()
		},
		lookMsg(val) {
			this.rowData = val
			this.problemTypeDetail = this.filterProblemType(val.problemType)
			this.foundIn = true
		},
		back() {
			this.foundIn = false
			this.loadData()
		},
		filterProblemType(val) {
			const res = this.problemType.find(
				(item) => Number(item.code) === Number(val)
			)
			return res?.description || '-'
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
}
::v-deep .tagheight .el-tag {
	height: 24px;
	line-height: 24px;
	min-width: 60px;
}
.msgList {
	font-size: 14px;
	display: flex;
	p {
		margin-right: 20px;
		line-height: 24px;
	}
	&:last-child p {
		margin-bottom: 15px;
	}
}
</style>
